<script lang="ts" setup>
import zhCn from 'element-plus/es/locale/lang/zh-cn'
</script>

<template>
    <el-config-provider :locale="zhCn">
        <!--路由-->
        <router-view v-slot="{ Component }">
            <transition name="fade">
                <component :is="Component" />
            </transition>
        </router-view>
    </el-config-provider>
</template>

<style lang="scss" scoped>
// 路由切换时的动画效果
// 进入时的透明度为0 和 刚开始进入时的原始位置通过active透明度渐渐变为1
.fade-enter-from {
    transform: translateX(-100%);
    opacity: 0;
}

// 进入完成后的位置 和 透明度
.fade-enter-to {
    transform: translateX(0%);
    opacity: 1;
}

.fade-leave-active,
.fade-enter-active {
    transition: all 300ms ease-out;
}

// 页面离开时一开始的css样式，离开后为leave-to，经过active渐渐透明
.fade-leave-from {
    transform: translateX(0%);
    opacity: 1;
}

// 离开后的透明度通过下面的active阶段渐渐变为0
.fade-leave-to {
    transform: translateX(100%);
    opacity: 0;
}
</style>
